<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>03_收集表单数据</title>
  <style>
    #demo {
      background-color: #f3e1e1;
    }
  </style>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="demo">
    账号:<input type="text" v-model="accont"><br><br>
    密码:<input type="password" v-model="password"><br><br>
    性别:男<input type="radio" name="gender" v-model="sex" value="man">
    女<input type="radio" name="gender" v-model="sex" value="woman">
    爱好: 抽烟<input type="checkbox" v-model="hobby" value="somke">
    喝酒<input type="checkbox" v-model="hobby" value="drink">
    烫头<input type="checkbox" v-model="hobby" value="perm"><br><br>
    所属校区: <select v-model="fuxuan">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="深圳">深圳</option>
      <option value="武汉">武汉</option>
      <option value="西安">西安</option>
      <option value="成都">成都</option>
    </select><br><br>
    其他信息:<textarea v-model="other"></textarea><br><br>
    <input type="checkbox" v-model="inp">阅读并接受《<a href="#">用户协议</a>》<br><br>
    <button @click="sub">提交</button>

  </div>
</body>

<script type="text/javascript">
  //阻止 vue 在启动时生成生产提示。
  Vue.config.productionTip = false;
  new Vue({
    el: '#demo',
    data() {
      return {
        accont: '',
        password: '',
        sex: '',
        hobby: [],
        fuxuan: '北京',
        other: '',
        inp: '',
      }
    },
    methods: {
      sub() {
        this.accont = '',
          this.password = '',
          this.sex = '',
          this.hobby = [],
          this.fuxuan = '',
          this.other = '',
          this.inp = ''

      }
    },
  })
</script>

</html>